import { Table } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import '../../../../assets/css/System/JBZL/JBZL.sass'
import { useSelector, useDispatch } from 'react-redux'
import { useNavigate, Link } from 'react-router-dom'
import { setChildrenRoutes } from '../../../../store/home/routerSlice'
import MTK from '../MTK';
import DelMTK from '../DelMTK'
import IsEnable from '../IsEnable'// 是否启用
import service from '../../../../service'

import zwglRoutes from '../../../../router/system/jbzl/zwgl'

const data = []
const deptName = []

// 获取部门名称
service.basicInfo.getDeptName().then(res => {
    // console.log(res);
    if (res.data) {
        res.data.map(item => {
            deptName.push(item)
        })
    }
    sessionStorage.setItem("deptName", JSON.stringify(deptName))
})

// 获取职位数据
service.basicInfo.getZwData().then(res => {
    // console.log(res.data);
    if (res.data) {
        res.data.map(item => {
            data.push({
                key: item.positionId,
                JobName: item.positionTitle,
                JobDescription: item.positionDescribe ? item.positionDescribe : '暂无描述',
                dept: getDeptName(item.deptno, deptName) ? getDeptName(item.deptno, deptName) : '无',
                addTime: `2022-08-16 15:47:44`,
                isEnable: < IsEnable props={[item.positionStatus]} />,
                operation: <div className='operation'>
                    <Link to={'/home/7/permSettings'} state={item.positionTitle} data-id={item.positionId}>权限设置</Link>
                    <MTK className='permission' props={['编辑', item, item.deptno, deptName]} />
                    <DelMTK props={[item.positionTitle, item.positionId]} />
                </div>
            })
        })
    }
})

function getDeptName(id, deptArr) {
    if (Array.isArray(deptArr)) {
        for (let i = 0; i < deptArr.length; i++) {
            if (id === deptArr[i].deptno) {
                return deptArr[i].dept_name
            }
        }
    }
}


export default function ZWGL() {
    // console.log('职位管理');
    const zwglRoutesArr = zwglRoutes
    const state = useSelector(state => state)
    const dispatch = useDispatch()
    const navigate = useNavigate()


    useEffect(() => {
        if (state.chilRoutes.isSet) {
            dispatch(setChildrenRoutes(zwglRoutesArr))
        }

    }, [])

    const columns = [
        {
            title: '职位名称',
            dataIndex: 'JobName',
        },
        {
            title: '职能描述',
            dataIndex: 'JobDescription',
        },
        {
            title: '所属部门',
            dataIndex: 'dept',
        },
        {
            title: '添加时间',
            dataIndex: 'addTime',
        },
        {
            title: '是否启用',
            dataIndex: 'isEnable',
        },
        {
            title: '操作',
            dataIndex: 'operation',
        },
    ];


    function test(e) {
        navigate('/home/7/permSettings')
        // console.log(e);
    }



    return (
        <div className='zwgl'>
            <div className='tableHeader'>
                <span><FileTextOutlined style={{ marginRight: '5px' }} />数据列表</span>
                <MTK props={['添加']} />
            </div>
            <Table columns={columns} dataSource={data} />
        </div>
    )
}




